<template>
	<view class="zxh-huati">
		<!-- 头部分类区 -->
		<view class="zxh-huati-tab">
			<ul>
				<li @click="tab1">
					<p :class="tabOption==1?'huati-option':null">推荐</p>
				</li>
				<li @click="tab2">
					<p :class="tabOption==2?'huati-option':null">最新</p>
				</li>
				<li @click="tab3">
					<p :class="tabOption==3?'huati-option':null">最热</p>
				</li>
			</ul>
		</view>
		<!-- 内容展示区 -->
		<view class="zxh-huati-root">
			<HuatiRoot v-for="item in huati" :key="item.id" :huati="item"></HuatiRoot>
		</view>
	</view>	
</template>

<script>
	import HuatiRoot from '../components/HuatiRoot.vue';
	export default {
		components:{
			HuatiRoot
		},
		data() {
			return {
				//控制头部选项卡和展示区状态
				tabOption:1,
				huatiData:[],
				huati:[],
			};
		},
		methods:{
			tab1(){
				this.tabOption = 1;
				this.huati= this.huatiData.filter((item)=>{
					return item.state == "推荐"
				})
			},
			tab2(){
				this.tabOption = 2;
				this.huati= this.huatiData.filter((item)=>{
					return item.state == "最新"
				})
			},
			tab3(){
				this.tabOption = 3;
				this.huati= this.huatiData.filter((item)=>{
					return item.state == "最热"
				})
			},
		},
		mounted() {
			this.$api.zxhhuati().then(res=>{
				this.huatiData = res.data;
				this.huati = this.huatiData;
			})
		}
	}
</script>

<style lang="scss" scoped>
.zxh-huati{
	.zxh-huati-tab{
		height: 90upx;
		ul{
			height: 90upx;
			padding: 0;
			box-shadow: 0 10upx 20upx #cccccc;
			li{
				width: 33.3%;
				height: 90upx;
				float: left;
				list-style: none;
				display: flex;
				p{	
					margin: auto;
					height: 90upx;
					line-height: 90upx;
					font-size: 26upx;
				}
				.huati-option{
					height: 86upx;
					line-height: 90upx;
					font-weight: 600;
					color: #28d2d1;
					border-bottom: 4upx solid #28d2d1;
				}
			}
		}
	}
	.zxh-huati-root{
		padding-bottom: 110upx;
	}
}
</style>